<template>
	<div class="swiper-container" :id="id" ref="swiper">
		<div class="swiper-wrapper">
			<slot></slot>
		</div>
		<div class="swiper-pagination" v-if="options.pagination === '.swiper-pagination'">
		</div>
		<div class="swiper-button-next" v-if="options.nextButton === '.swiper-button-next'">
			<icon type="fa-angle-right"></icon>
		</div>
		<div class="swiper-button-prev" v-if="options.prevButton === '.swiper-button-prev'">
			<icon type="fa-angle-left"></icon>
		</div>
		<div class="swiper-scrollbar" v-if="options.scrollbar === '.swiper-scrollbar'"></div>
	</div>
</template>

<style>
    @import "../../sass/custom/_swiper.scss";
</style>

<script>
	import Swiper from 'swiper/dist/js/swiper.jquery.min';
	import Icon from '../widget/Icon';
	export default {
		components: {Icon},
		name: 'Carousel',
		props: {
			id: {type: String, default: null},
			options: {type: Object, required: true}
		},
		mounted () {
			this.$nextTick(() => {
				this.swiper = new Swiper(this.$el, this.options);
			});
		},
		updtaed () {
			if (this.swiper) {
				this.swiper.update();
			}
		},
		beforeDestroy () {
			if (this.swiper) {
				this.swiper.destroy();
				delete this.swiper;
			}
		}
	};
</script>
